<template>
  <div>
    <h3>过度动画效果</h3>
    <!-- 
        <transition> 元素作为单个元素/组件的过渡效果。
        <transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素
        transition包裹的标签必须有v-show||v-if属性
        动画分为 进入/离开阶段
        进入阶段: v-enter(进入阶段的起点样式) v-enetr-active(过度的频率等) v-enter-to(进入阶段终点的样式)
        离开阶段：v-leave(离开阶段的起点样式) v-leave-active(过度的频率等) v-leave-to(离开阶段终点的样式)
     -->
    <button @click="flag = !flag">点击显示/隐藏</button>
    <transition>
      <h1 v-show="flag">显示/隐藏的元素</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "tran",
  data() {
    return {
      flag: true,
    };
  },
};
</script>

<style scoped>
div {
  width: 300px;
  margin: 20px auto;
}
h1 {
  background-color: aquamarine;
}
.v-enter,
.v-leave-to {
  transform: translateX(-1000px);
}
.v-enter-to,
.v-leave {
  transform: translateX(0);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s;
}
</style>